Skip to content

feat(base-modal): add scrollLock prop to control page scroll behavior - #2200

Merged
AdrianArenal merged 2 commits into
mainfrom
feat/base-modal-disable-scroll-prop
Nov 12, 2026
Merged

AdrianArenal merged 2 commits into
mainfrom
feat/base-modal-disable-scroll-prop

Conversation

@AdrianArenal

Copy link
Copy Markdown
Contributor

Pull request template

Motivation and context

BaseModal always sets overflow: hidden on body and html while it is open. Consumers that keep a modal open while it is visually hidden (e.g. an embedded predictive layer with no content) end up with a page that can't be scrolled. There was no way to opt out.

This adds a scrollLock prop (default true, so no behaviour change) to control that lock.

  • Dependencies. If any, specify:
  • Open issue. If applicable, link:

Type of change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that causes existing functionality to not work as expected)
  • Change requires a documentation update

What is the destination branch of this PR?

  • Main
  • Other. Specify:

What changed

  • New scrollLock prop on BaseModal (Boolean, default true).
    • true: unchanged behaviour, locks the page scroll while open and restores it on close.
    • false: the modal never touches overflow on body/html.
  • The prop can be toggled while the modal is open (releases / re-applies the lock).
  • The modal only restores overflow values it set itself, so it no longer overwrites styles set by others when scrollLock is false.
  • BaseIdModal / BaseEventsModal forward it via attribute fallthrough (:scroll-lock="false").
  • Docs section added to BaseModal.

How has this been tested?

Unit tests in base-modal.spec.ts: default lock + restore, no lock with scrollLock=false, toggling while open, not restoring overflow it didn't set, restore on unmount while open. src/components/modals: 61 tests pass; eslint and vue-tsc clean.

Checklist:

  • My code follows the style guidelines of this project.
  • I have performed a self-review on my own code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have made corresponding changes to the documentation.
  • My changes generate no new warnings.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.

@AdrianArenal
AdrianArenal requested a review from a team as a code owner November 12, 2026 16:05
@AdrianArenal
AdrianArenal merged commit dcd9d54 into main Nov 12, 2026
1 check passed
@AdrianArenal
AdrianArenal deleted the feat/base-modal-disable-scroll-prop branch November 12, 2026 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants